<template>
	<view>
		<!-- 展开list单元格 -->
		<view class=" bod_cost">
			<view class="bus">
				<slot name="lefttitle"></slot>
				<p>
					<b>{{title}}</b>
				</p>
			</view>
			<view style="white-space:nowrap;">
			<slot name="text"></slot>
			<u-icon v-show="!cellshow" @click="cellshow = !cellshow"
				style='display: inline-block;padding-left: 10rpx;' name="arrow-down"></u-icon>
			<u-icon v-show="cellshow" @click="cellshow = !cellshow"
				style='display: inline-block;padding-left: 10rpx;' name="arrow-up"></u-icon>
			</view>	
		</view>
	
		<!-- 展开合并 -->
		<el-collapse-transition>
		<view v-show="cellshow" class="sub_cost">
			<view v-for="(item,index) in celllist" :key="index" class="bod_costs"
				style="background-color: #f7fbff;border: 1px solid white;">
				<view class="bus">
					<p style='color: #666666'>{{item[names]}}</p>
				</view>
				<p class='bodcolors'>￥<span v-money>{{item[trans]}}</span></p>
			</view>
			<slot name="list"></slot>
		</view>
		</el-collapse-transition>
		
	</view>
</template>

<script>
	export default {
		props:{
			cellshows:{
				type:Boolean,
				default:false
			},
			celllist:{
				type:Array
			},
			title:{
				type:String,
			},
			row:{
				type:Array
			},
			names:{
				type:String
			},
			trans:{
			}
		},
		created() {
			this.list = this.arrcell
		},
		data() {
			return {
				cellshow:this.cellshows,
				boolean:false,
				numbers:false,
				list:''
			}
		},
		methods: {
			change(e){
				console.log('change', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.bod_costs {
			padding: 15rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: none;
			span {
				display: inline-block;
				font-size: 30rpx;
				width: auto;
				white-space:nowrap;
				color: #666666;
			}
			p {
				font-size: 30rpx;
				word-break:break-all;
				display: inline-block;
				color: #333333;
			}
			
	}
.bus {
		display: flex;
		flex-direction: row;
		align-items: center;
		image{
			width: 50rpx;
			height: 50rpx;
		}
		p{
			font-size: 30rpx;
		}
	}
</style>
